<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    class="form"
  >
    <el-form-item class="form-item" prop="username">
      <el-input
        v-model="form.username"
        placeholder="手机号"
        @focus="clearErrorTips('username')"
      />
    </el-form-item>

    <el-form-item class="form-item" prop="captcha">
      <el-input
        v-model="form.captcha"
        placeholder="验证码"
        @focus="clearErrorTips('captcha')"
      >
        <template slot="append">
          <el-button @click="handleSendCaptcha">
            发送验证码
          </el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="nickname">
      <el-input
        v-model="form.nickname"
        placeholder="你的名字"
        @focus="clearErrorTips('nickname')"
      />
    </el-form-item>

    <el-form-item class="form-item" prop="password">
      <el-input
        v-model="form.password"
        placeholder="密码"
        type="password"
        @focus="clearErrorTips('password')"
      />
    </el-form-item>

    <el-form-item class="form-item" prop="checkPassword">
      <el-input
        v-model="form.checkPassword"
        placeholder="确认密码"
        type="password"
        @focus="clearErrorTips('checkPassword')"
      />
    </el-form-item>

    <el-button
      class="submit"
      type="primary"
      @click="handleRegSubmit"
    >
      注册
    </el-button>
  </el-form>
</template>

<script>
export default {
  name: 'RegisterForm',
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'))
      } else if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: '', // 登录用户名/手机
        password: '', // 登录密码
        checkPassword: '', // 确认密码
        nickname: '', // 昵称
        captcha: '' // 手机验证码
      },
      rules: {
        checkPassword: [{
          validator: validatePass, // 自定义规则验证
          trigger: 'blur'
        }],
        username: [{
          required: true,
          message: '请输入正确的手机号',
          trigger: 'blur',
          pattern: /^1[345678]\d{9}$/
        }],
        password: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        },
        {
          min: 5,
          max: 12,
          message: '密码长度为5-12',
          trigger: 'blur'
        }],
        nickname: [{
          required: true,
          message: '用户名不能为空',
          trigger: 'blur'
        }],
        captcha: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    //   获取验证码
    handleSendCaptcha () {
      if (!this.form.username) {
        this.$confirm('手机号码不能为空', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
        return
      }

      const reg = /^1[345678]\d{9}$/
      if (this.form.username.length !== 11 || !reg.test(this.form.username)) {
        this.$confirm('手机号码格式错误', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
        return
      }
      this.$axios.post('/captchas', {
        tel: this.form.username
      }).then((res) => {
        this.form.captcha = res.data.code
      })
    },
    handleRegSubmit () {
      this.$refs.form.validate((valid) => {
        const { checkPassword, ...data } = this.form
        if (valid) {
          this.$axios.post('/accounts/register', data).then((res) => {
            if (res.data.token) {
              this.$message.success('注册成功')
              this.$emit('registerSuccess')
            }
          })
        }
      })
    },
    clearErrorTips (prop) {
      this.$refs.form.clearValidate(prop)
    }
  }
}
</script>

<style scoped lang="less">
.form{
        padding:25px;
    }
    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .submit{
        width:100%;
        margin-top:10px;
    }
</style>
